<template>
    <div class="_edit">
        <page-main class="_main">
            <!-- 返回 -->
            <el-button
                type="primary"
                icon="el-icon-d-arrow-left"
                @click="_return"
            >
                返回
            </el-button>
            <!-- 文件图片上传 -->
            <el-upload
                v-model="imgUrl"
                class="upload-demo"
                drag
                :limit="1"
                :on-change="fileListfunc"
                :file-list="fileList"
                :auto-upload="false"
                action=""
                multiple
                list-type="picture"
            >
                <i class="el-icon-upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <!-- 上架 -->
            <h5>
                上架
            </h5>
            <el-switch
                v-model="value"
                active-color="#409EFF"
                @change="changeStatus"
            />
            <!-- 取消与立即修改 -->
            <el-row class="operation">
                <el-button @click="cancel"><span>取消</span></el-button>
                <el-button type="primary" @click="upd()"><span>创建</span></el-button>
            </el-row>
        </page-main>
    </div>
</template>
<script>

export default {
    data() {
        return {
            value: true,
            imgUrl: '',
            createTime: ''
        }
    },
    created() {
        console.log(this.$route.params)
    },
    methods: {
        // 获取当前年月日
        mounted() {
            var that = this
            let yy = new Date().getFullYear()
            let mm = new Date().getMonth() + 1
            let dd = new Date().getDate()
            let hh = new Date().getHours()
            let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
            let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
            that.createTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
            // console.log(this.updateTime)
        },
        // 是否上架的回调
        changeStatus(res) {
            this.value = res
        },
        _return() {
            this.$router.go(-1)
        },
        async fileListfunc(file, fileList) {
            console.log('file', file, 'fileList', fileList)
            this.file = fileList[0].raw
            var flx = this.file.type.split('/')[1]
            var fileda =  await this.$cloudbase
                .uploadFile({
                    cloudPath: 'banner' + new Date().getTime() + '.' + flx,
                    filePath: this.file
                })
            this.imgUrl = fileda.fileID

        },
        // 取消
        cancel() {
            this.$router.go(-1)
        },
        // 创建
        upd() {
            let that = this
            this.mounted()
            var banner = this.$cloudbase.database().collection('banner')
            banner.add({
                url: that.imgUrl,
                onshelf: that.value,
                createTime: that.createTime

            }).then(() => {
                this.$router.go(-1)
            })
        }

    }
}
</script>

<style>
._edit ._main .el-button {
    margin-bottom: 20px;
}
._edit ._main div span ._edit ._main .fileId {
    margin-bottom: 20px;
}
._edit ._main .operation span {
    margin-bottom: 0;
}
._edit ._main .el-switch {
    margin-bottom: 20px;
}
</style>
